<template>
  <section class="shipment-sender-info">
    <p>
      <template v-for="(item, index) in list">
        <span v-if="item"
              :key="index">{{ item }}；</span>
      </template>
    </p>
  </section>
</template>

<script>
export default {
  name: "ChildOrderNo",
  props: {
    row: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      list: []
    };
  },
  computed: {
    rows () {
      return this.row
    }
  },
  watch: {
    rows: {
      handler (value) {
        this.list = [];
        if (value && value?.waybills?.length) {
          value.waybills.map((item) => {
            this.list.push(item.contractNo);
          });
        }
      }
    },
    immediate: true
  },
  created () {
    if (this.row && this.row?.waybills?.length) {
      this.row.waybills.map((item) => {
        this.list.push(item.contractNo);
      });
    }
  }
};
</script>
<style scoped>
.shipment-sender-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>